<script setup lang="ts">
import type { Teacher } from '@/hooks/class/useClassManagement'
import { computed, toRef } from 'vue'
import { useRouter } from 'vue-router'
import ScrollContainer from '@/components/common/ScrollContainer.vue'
import TextInput from '@/components/common/TextInput.vue'
import { useTeacherManagement } from '@/hooks/class/useTeacherManagement'
import { useTeacherStore } from '@/store/teacher'

const props = defineProps<{
  classId: string
  teachers: Teacher[]
}>()

const emit = defineEmits<{
  (e: 'update:teachers', teachers: Teacher[]): void
}>()

const router = useRouter()

const teachersRef = computed({
  get: () => props.teachers,
  set: value => emit('update:teachers', value),
})

const self = useTeacherStore()

const classIdRef = toRef(props, 'classId')

const {
  newTeacher,
  isAddingTeacher,
  handleAddTeacher,
  handleRemoveTeacher,
  cancelAddTeacher,
} = useTeacherManagement(classIdRef, teachersRef)
async function handleRemoveOrExitTeacher(teacher: Teacher) {
  await handleRemoveTeacher(teacher)
  if (self.teacher.teacherId === teacher.tid) {
    router.push('/class')
  }
}
</script>

<template>
  <div class="card-area">
    <div class="card-header">
      班级教师管理
      <button v-if="!isAddingTeacher" @click="isAddingTeacher = true">
        + 添加教师
      </button>
    </div>

    <!-- 添加教师表单 -->
    <div v-if="isAddingTeacher" class="add-teacher-form">
      <div class="form-row">
        <TextInput v-model="newTeacher.name" label="姓名:" placeholder="请输入教师姓名" class="form-input" />
        <TextInput v-model="newTeacher.phone" label="手机号:" placeholder="请输入手机号" class="form-input" />
        <button class="confirm-btn" @click="handleAddTeacher">
          添加
        </button>
        <button class="cancel-btn" @click="cancelAddTeacher">
          取消
        </button>
      </div>
      <div class="form-actions" />
    </div>

    <!-- 教师列表 -->
    <ScrollContainer>
      <div v-for="teacher in teachers" :key="teacher.phone" class="teacher-item">
        <div class="teacher-name">
          {{ teacher.name }}
        </div>
        <div class="teacher-phone">
          {{ teacher.phone }}
        </div>
        <div class="teacher-phone">
          {{ teacher.gender === 'male' ? '男' : (teacher.gender === 'female' ? '女' : '-') }}
        </div>
        <button class="remove-btn" @click="handleRemoveOrExitTeacher(teacher)">
          {{ self.teacher.teacherId === teacher.tid ? '退出' : '移除' }}
        </button>
      </div>
      <div v-if="teachers.length === 0" class="empty-state">
        暂无教师
      </div>
    </ScrollContainer>
  </div>
</template>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  letter-spacing: -0.06em;
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}

.add-btn {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.add-teacher-form {
  margin-bottom: 20px;
  padding: 16px 0;
  border-radius: 8px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 6rem 6rem;
  gap: 16px;
}

.confirm-btn {
  border-radius: 6px;
}

.cancel-btn {
  box-shadow: 0px 0px 0px 2px var(--info-color);
  background: transparent;
  color: var(--text-color-secondary);
  border-radius: 6px;
}

.teacher-item {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 4rem;
  padding: 12px;
  border-bottom: 1px solid #eee;
}

.teacher-name {
  font-weight: 500;
  color: #333;
}

.teacher-phone {
  font-size: 14px;
  color: #666;
}

.remove-btn {
  background: transparent;
  color: #dc3545;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.empty-state {
  padding: 40px;
  text-align: center;
  color: #999;
  font-size: 14px;
}
</style>
